<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				text-align: center;
				margin: 0;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			#lightImage {
				width: 300px;
				margin-top: 20px;
			}
			#toggleButton {
				font-size: 24px;
				padding: 15px 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<button id="toggleButton">开灯</button>
			<img id="lightImage" src="img/off.jpg" alt="关灯">
		</div>
		<script>
			const lightImage = document.getElementById('lightImage');
			const toggleButton = document.getElementById('toggleButton');
			toggleButton.addEventListener('click', function() {
				if (lightImage.src.includes('img/off.jpg')) {
					lightImage.src = 'img/on.jpg';
					toggleButton.innerHTML = '关灯';
				} else {
					lightImage.src = 'img/off.jpg';
					toggleButton.innerHTML = '开灯';
				}
			});
		</script>
	</body>
</html>
